#{extends 'organization.html' /}
<div class="viewContent">
#{set 'moreScripts'}
    #{script 'rating-script.js'/}
    #{script 'fading-in-out.js'/}
    <script type="text/javascript"
	src="@{'/public/javascripts/jquery.color.js'}"></script>
	<script type="text/javascript"
	src="/public/javascripts/jquery.tokeninput.js"></script>
<link rel="stylesheet" type="text/css"
	href="/public/stylesheets/token-input-facebook.css" />
<link rel="stylesheet" type="text/css"
	href="/public/stylesheets/token-input.css" />
<link rel="stylesheet" type="text/css"
	href="/public/stylesheets/Sharing.css" />
#{/set}
#{set 'moreStyles'}
#{styleSheet 'rating.css'/}
#{/set}

<script type="text/javascript"> 
	function unTag(name,topicID,entityID,tagID) {
		
		var answer = confirm("Are you sure you want to remove the tag: " + name + "? This cannot be undone.");
		
		if (answer) {
			$.ajax({
				 type: "GET",
				 url: "/topiccontroller/untagtopic",
				 dataType: "html",
				 data: "topicID="+topicID+"&tagID="+tagID+"&entityID="+entityID,
				 success: function(html){
				 $("#tagsList").replaceWith($("#tagsList", html));
			     }
			 	});
		}
	}
	
	function showRenameTag(id) {
				document.getElementById("form"+id).style.visibility = 'visible';
	}
	
	function renameTag(topicID,entityID,tagID) {

			document.getElementById("form"+tagID).style.visibility = 'hidden';
			var newName = document.getElementById("input"+tagID).value;
			
			if(newName.length <= 20) {
			
			$.ajax({
				 	type: "GET",
				 	url: "/topiccontroller/renametagform",
				 	dataType: "html",
				 	data: "topicID="+topicID+"&tagID="+tagID+"&entityID="+entityID+"&newName="+newName,
				 	success: function(html){
				 	$("#tagsList").replaceWith($("#tagsList", html));
			     	}
			 	  });
		
		   }
	}	
	
</script>

<STYLE TYPE='text/css'>
	.rePosition {
		position: relative; 
		bottom: -5px;
	}
	
	.rePost {
		position: relative; 
		bottom: -6px;
	}
	</STYLE>
#{if view==0}
<h2>Sorry, you are trying to view a non existing topic</h2> #{/if}
#{else}
#{set title:topic.name /}
 #{if view==1}
	<h2>
		Sorry, you are not allowed to view the ideas of this topic.<br /> You
		are either not logged in or not a member of the organization
	</h2>
#{/if}
	#{else}
	 #{if topic.status==3} 
	 <h2>Sorry, you are trying to view a non existing topic</h2>
	 #{/if}
	#{else}
	
	
<div class="topic">

	<h2 style="width:450px;" class="topic-name">Topic name: ${topic.name}
	</h2>
	<div class="topic-meta-data">
		<span  class="topic-description"> 
			<div style="width: 400px;float:left;">Description: ${topic.description}
			</div> 
			<br>
			<div style="float:right;">
			#{if topic.checkLock()==true && ifOrganizer==3}
			
<div class="formLabel">

<label style="color:#0000A0;font-family:verdana,arial,sans-serif;font-size:15px">Unlock Topic
</label>
<br/>
<a href = "@{Browse.unlockTopic(topic.id)}">
<br>
			<img src = "@{'/public/images/Lock.png'}">
			</img>
			</a>
</div>

#{/if}
#{if  topic.checkLock()==false && ifOrganizer==3}
<div class="formLabel">
<label style="color:#0000A0;font-family:verdana,arial,sans-serif;font-size:15px">
Lock Topic
</label>
<br>
<a href = "@{Browse.lockTopic(topic.id)}">
		<img src = "@{'/public/images/UnLock.png'}">
			</img>
			</a>
			
		</div>

#{/if}
			
</div>
</br>			
			
		</span>
		<span class = "topic-status">
		 #{if topic.status==0} Status: Active topic #{/if}
		 #{if topic.status==1} Status: Inactive topic #{/if}
		 #{if topic.status==2} Status: Closed topic #{/if}
		 #{if topic.status==4} Status: Hidden topic #{/if}
		 <br>
		</span>
		#{if allowedToRate}
			#{Fat7y.Tags.rating topic:topic /}
			<div class = "report">
				#{form @NotificationController.viewReportPageTopic(topic.id)}
					<input type="submit" name= "viewReport" value ="Report Topic">
				#{/form}
			</div>
		#{/if}
		#{if (session.get("username")==null) || session.get("username").equalsIgnoreCase("guest")}
 <div> <span> Share</span>
 </div>
 #{/if} 
 #{else} 
 <div>
 <div id="share">

	<a class="standardLink" href="#sharingForm">share</a>

</div>

<form id="sharingForm" action="" method="post" name="shareForm">

	<h2>Share topics...</h2>
	<ul>
		<li><label style="padding-top: .5em;">Your Message</label> <textarea
				name="message" id="message" placeholder="Please type your message"
				cols="80" rows="10" maxlength="10000"></textarea>
		</li>
		<li><label style="padding-top: .5em;">Share with:</label> <textarea
				type="text" name="names" id="names" maxlength="10000"></textarea>
	</ul>

	  <div id="formButtons">
	<input type="submit" id="myShare" name="share" value="Share" /> <input
		type="button" id="cancelShare" name="cancel" value="Cancel" />
	 </div>
</form>

<script type="text/javascript">
	$(document).ready(function() {
		$("#names").tokenInput("@{Sharing.searchUser(q)}", {
			theme : "facebook"
		});
	});
</script>

<div id="sharing" class="statusMessage">
	<p>The topic is being shared. Please wait...</p>
</div>
<div id="shared" class="statusMessage">
	<p>The topic has been shared successfully</p>
</div>
<div id="failed" class="statusMessage">
	<p>There was a problem sharing the topic. Please try again.</p>
</div>
<div id="emptyList" class="statusMessage">
	<p>You have to enter at least one person.</p>
</div>
#{/else}
		<span class = "topic-date">
		 Started at: ${topic.date} <br>
		 </span>
		<span class = "topic-creator">
		 Created by: ${topic.creator.name} <br>
		 </span>
	</div>
</div>
</div>


#{if isUpperManagement}
#{if flash.error}
		<p style="color:red"> ${flash.error}
		</p>
		#{/if}
	<a href="@{Browse.deleteTopic(topic.id)}" class="standardLink">Delete Topic</a>
	<a href="@{Browse.closeTopic(topic.id)}" class="standardLink">Close Topic</a>
	<a href="@{Browse.viewDuplicateMarks(topic.id)}" class="standardLink">View Ideas' Duplicate Marks</a>
#{/if}

<div class="ideas">
	<br/><br/>
	<h4>${countIdeasinTopic ?: 'no'} idea(s) are published under topic: ${topic.name}</h4>

	
	<br/>
	#{list items:topic.ideas, as:'idea'} 
	#{if (!((idea.isHidden)&&!(isUpperManagement))) && !(idea.isDraft)}
        	
        	<div class="idea">
             	   <a href="@{Browse.viewIdea(idea.id)}" class="standardLink">${idea.title}</a>
        	</div>
        	#{/if}
 
	

	#{/list}
	<div>
#{if isAllowedToFollow == true}
#{form @UserController.userFollowTopic(topic.id)}
<pre>
#{if flash.success}
	<script>
		alert("${flash.success}");
		</script>
	#{/if}
<input type="submit" value = "FOLLOW"><br />
</pre>
#{/form}
#{/if}
#{if isAllowedToUnfollow == true}

#{form @UserController.userUnfollowTopic(topic.id)}
<pre>
#{if flash.success}
	<script>
		alert("${flash.success}");
		</script>
	#{/if}
<input type="submit" value = "UNFOLLOW"><br />
</pre>
#{/form}
#{/if}</div>	


<br/><br/>   
	#{form @TopicController.viewPostIdea(topic.id)}
	 <div class="formEntry">
	<input type="submit" value = "Post an Idea under the topic ${topic.name}"><br />
	</div>
	#{/form}
	
<br/><br/><br/>	
	#{if isUpperManagement}
	
	#{form @TopicController.viewTagTopic(topic.id)}
	<input type="submit" value = "Tag this Topic!"><br />
	#{/form}
	<br/><br/>
		#{if topic.status == 4}
		<p>
		The topic is hidden. You can show it back again!
		</p>

		#{form @TopicController.showTopic(topic.id)}
		<div class="formEntry">
		<input type="submit" value = "Show Topic now"><br />
		</div>
		#{/form}
		#{/if}
		
		#{else}
		<p>
		You can hide the topic "${topic.name}" from Idea Developers!
		</p>

		#{form @TopicController.hideTopic(topic.id)}
		<div class="formEntry">
		<input type="submit" value = "Hide this Topic now"><br />
		</div>
		#{/form}
		#{/else}
	
	#{/if}

</div>	



<div class="tags">

<br/>
	<div id="tagsList">
	
	<p>${topic.tags.size() ?: 'No'} tag(s) are available
	</p>
	#{list items:topic.tags, as:'tag'}
	<li>${tag.name}
	
	#{if isOrganizer}
	
	<input onclick="javascript:unTag('${tag.name}',${topic.id},${topic.entity.id},${tag.id});" class="rePosition" type="image" name="deleteTag" src="@{'/public/images/Remove-icon.png'}" width="20" height="20"/> 
	
	<input onclick="javascript:showRenameTag(${tag.id});" class="rePost" type="image" name="renameTag" src="@{'/public/images/rename_icon.png'}" width="25" height="25"/>
	
	<div id="form${tag.id}" style="visibility:hidden">
		<br/>
		<form id="members" action = "javascript:renameTag(${topic.id},${topic.entity.id},${tag.id});" method="post" >
			<input type="text" name="newName"
				id="input${tag.id}" />
			<input type="submit" value="rename tag"/>

		</form>
	</div>
	
	#{/if}
	</li>
	#{/list}
    </div>




  <div class="Topic Relations">
  
  
    <div>
      #{ifErrors}
       <div class="error">
       <p class="error">Oops</p>
      #{errors}
       <li>${error}</li>
      #{/errors}
      </div>
      #{/ifErrors}
    </div>
#{if flash.success}

<script>
		alert("${flash.success}");
		
</script>
		
		#{/if}


#{if ifCreator==3 }
#{if topic.checkLock()==false && allTopics.size()>0}
<div class="formEntry">
#{form @UserController.relateToTopic(topic.id)}
<div class="formLabel">
<label>Relate To :</label>  
</div>

<div class="formEntry">
<select name ="relateTopic"	>
#{list items: allTopics, as: 'alltopics'}
<option value="${alltopics.id}" >${alltopics.name}</option>
#{/list}
</select>
</div>

<div class="formLabel">
<label>Name of Relation:</label>
</div>
 <input type="text" name = "relationName" />

<input type="submit" value = "Relate"onfocus="this.blur()" />

#{/form}
</div>
#{/if}
#{/if}
<br/>


<div class= "formLabel">
#{if topic.relatedTopicList.size()==0}
<label>No Related Topics</label>
#{/if}
</div>

#{if topic.relatedTopicList.size()!=0}

<h4 style="width:500px;">Related Topics to ${topic.name}
</h4>

<br/>
<div style="height:120px;width:550px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">

#{list items: relatedTopics, as: 'relatedTopic'}
<a class="standardLink" style="font:16px/26px Georgia, Garamond, Serif;"href = "@{Browse.viewTopic(relatedTopic.id)}">
${relatedTopic.name}
</a>
<label style="font-style:italic;font-size:10pt;">  
Relation name:
</label>
 <label> 
 ${topic.getTopicRelationName(topic,relatedTopic)}
 </label> 
#{if topic.relatedTopicList.size()!=0 && ifCreator==3}
#{if ifCreator==3 && topic.checkLock()==false}

<a href = "@{UserController.removeRelation(topic.id,relatedTopic.id)}">
			<img src = "@{'/public/images/Delete.png'}">
			<img/>
			</a>
			
#{/if}
#{/if}
<br/>
#{/list}

</div>
#{/if}

<p style="font-family:verdana,arial,sans-serif;font-size:10px;"></p>


</div>
</div>



<script type="text/javascript"> 
var messageDelay = 2000; // How long to display status messages (in
//milliseconds)

//Init the form once the document is ready
$(init);

//Submit the form via Ajax

function shareTopic() {
	var sharingForm = $('#sharingForm');

	// Are all the fields filled in?

	if ($('#names').val() == "") {
		// No; display a warning message and return to the form
		$('#emptyList').fadeIn().delay(messageDelay).fadeOut();
		sharingForm.fadeOut().delay(messageDelay).fadeIn();

	} else {

		// Yes; submit the form via Ajax

		$('#sharing').fadeIn();
		sharingForm.fadeOut();
		if (!$('#message').val())
			$.post('/sharing/shareTopic/' + "null/" + ${topic.id}+'/'
					+ document.shareForm.names.value, function(data) {
				shareDone("success");
			});
		else
			$.post('/sharing/shareTopic/' + document.shareForm.message.value
					+ '/'+ ${topic.id}+ '/'+document.shareForm.names.value, function(data) {
				document.shareForm.names.value = "";
				shareDone("success");
			});
	}
	// Prevent the default form submission occurring
	return false;
}

//Initialize the form

function init() {

	// Hide the form initially.
	// Make submitForm() the form's submit handler.
	// Position the form so it sits in the centre of the browser window.
	$('#sharingForm').hide().addClass('positioned');
	$('#myShare').click(shareTopic);
	// When the "Send us feedback" link is clicked:
	// 1. Fade the content out
	// 2. Display the form
	// 3. Move focus to the first field
	// 4. Prevent the link being followed

	$('a[href="#sharingForm"]').click(function() {
		$('#share').fadeTo('slow', .2);
		$('#sharingForm').fadeIn('slow', function() {
		})

		return false;
	});

	// When the "Cancel" button is clicked, close the form
	$('#cancelShare').click(function() {
		$('#sharingForm').fadeOut();
		$('#share').fadeTo('slow', 1);
	});

	// When the "Escape" key is pressed, close the form
	$('#sharingForm').keydown(function(event) {
		if (event.which == 27) {
			$('#sharingForm').fadeOut();
			$('#share').fadeTo('slow', 1);
		}
	});

}

//Handle the Ajax response

function shareDone(response) {
	response = $.trim(response);
	$('#sharing').delay(2000).fadeOut();

	if (response == "success") {

		// Form submitted successfully

		// 1. Display the success message
		// 2. Clear the form fields
		// 3. Fade the content back in

		$('#shared').delay(messageDelay).fadeIn().delay(messageDelay).fadeOut();
		$('#names').val("");
		$('#message').val("");
		$('#share').delay(messageDelay + 500).fadeTo('slow', 1);

	} else {

		// Form submission failed: Display the failure message,
		// then redisplay the form
		$('#failed').fadeIn().delay(messageDelay).fadeOut();
		$('#sharingForm').delay(messageDelay + 500).fadeIn();
	}
	document.shareForm.message.value = "";
	var list = $(".token-input-token-facebook");
	list.html('');
}

</script>
#{/else}#{/else}#{/else}
</div>





